<template>
    <div>
        <!-- 主体区域 -->
        <div class="home-hero-container container clearfix">
            <!-- 主体区域 轮播图和分类-->
            <div class="home-hero">
                <!-- 轮播图 -->
                <div class="home-hero-swiper">
                    <ul>
                        <li><a href="#"><img src="../assets/uploads/main-back-1.jpg" alt=""></a></li>
                        <li><a href="#"><img src="../assets/uploads/main-back-2.jpg" alt=""></a></li>
                        <li><a href="#"><img src="../assets/uploads/main-back-3.jpg" alt=""></a></li>
                        <li><a href="#"><img src="../assets/uploads/main-back-4.jpg" alt=""></a></li>
                    </ul>
                    <!-- 左右按钮 -->
                    <a href="javascript:;" id="swiper-left" class="swiper-left iconfont iconleft"></a>
                    <a href="javascript:;" id="swiper-right" class="swiper-right iconfont iconright"></a>
                    <!-- 小圆圈 -->
                    <div class="bullets">
                        <a href="#" index="0" class="active"></a>
                        <a href="#" index="1"></a>
                        <a href="#" index="2"></a>
                        <a href="#" index="3"></a>
                    </div>
                </div>
            </div>
            <!-- 主体区域 主体的二级导航-->
            <div class="home-hero-sub">
                <div class="span4">
                    <ul class="home-channel-list">
                        <li><a href="#"><img src="../assets/uploads/sub-3.png" alt="">小米秒杀</a></li>
                        <li><a href="#"><img src="../assets/uploads/sub-4.png" alt="">企业团购</a></li>
                        <li><a href="#"><img src="../assets/uploads/sub-6.png" alt="">F码通道</a></li>
                        <li><a href="#"><img src="../assets/uploads/sub-2.png" alt="">米粉卡</a></li>
                        <li><a href="#"><img src="../assets/uploads/sub-5.png" alt="">以旧换新</a></li>
                        <li><a href="#"><img src="../assets/uploads/sub-1.png" alt="">话费充值</a></li>
                    </ul>
                </div>
                <div class="span16">
                    <ul class="home-promo-list">
                        <li><a href="#"><img src="../assets/uploads/sub-nav-1.jpg" alt=""></a></li>
                        <li><a href="#"><img src="../assets/uploads/sub-nav-2.jpg" alt=""></a></li>
                        <li><a href="#"><img src="../assets/uploads/sub-nav-3.jpg" alt=""></a></li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- 楼层区 -->
        <div class="home-main">
            <div class="container">
                <!-- 小米闪购 -->
                <div class="xm-flashsale">
                    <!-- 头部 -->
                    <div class="box-hd">
                        <h2>小米闪购</h2><span class="button-left iconfont iconleft"></span><span class="button-right iconfont iconright"></span>
                    </div>
                    <!-- 主体 -->
                    <div class="box-bd">
                        <div class="row">
                            <div class="flash-countdown span4 rainbow-item-1">
                                <div class="round">00:00 场</div>
                                <img src="../assets/uploads/flash.png" alt="">
                                <div class="desc">本场已结束</div>
                                <div class="countdown"><span>00</span><i>:</i><span>00</span><i>:</i><span>00</span></div>
                            </div>
                            <div class="flashsale-list span16">
                                <ul>
                                    <li class="rainbow-item-2">
                                        <a href="#">
                                            <div class="content">
                                                <div class="thumb"><img src="../assets/uploads/xm-flash-1.jpg" alt=""></div>
                                                <h3 class="title">最生活毛巾·Air（10条装） 白色+素蓝</h3>
                                                <p class="desc">给生活一条好毛巾</p>
                                                <p class="price"><span>99元</span><del>169元</del></p>
                                            </div>
                                        </a>
                                    </li>
                                    <li class="rainbow-item-3">
                                        <a href="#">
                                            <div class="content">
                                                <div class="thumb"><img src="../assets/uploads/xm-flash-2.jpg" alt=""></div>
                                                <h3 class="title">米家IH电饭煲 4L 白色</h3>
                                                <p class="desc">多才多艺的智能电饭煲</p>
                                                <p class="price"><span>499元</span><del>599元</del></p>
                                            </div>
                                        </a>
                                    </li>
                                    <li class="rainbow-item-4">
                                        <a href="#">
                                            <div class="content">
                                                <div class="thumb"><img src="../assets/uploads/xm-flash-3.jpg" alt=""></div>
                                                <h3 class="title">最生活毛巾·Air（10条装） 白色+素蓝</h3>
                                                <p class="desc">给生活一条好毛巾</p>
                                                <p class="price"><span>99元</span><del>169元</del></p>
                                            </div>
                                        </a>
                                    </li>
                                    <li class="rainbow-item-1">
                                        <a href="#">
                                            <div class="content">
                                                <div class="thumb"><img src="../assets/uploads/xm-flash-4.jpg" alt=""></div>
                                                <h3 class="title">最生活毛巾·Air（10条装） 白色+素蓝</h3>
                                                <p class="desc">给生活一条好毛巾</p>
                                                <p class="price"><span>99元</span><del>169元</del></p>
                                            </div>
                                        </a>
                                    </li>
                                    <li class="rainbow-item-2">
                                        <a href="#">
                                            <div class="content">
                                                <div class="thumb"><img src="../assets/uploads/xm-flash-1.jpg" alt=""></div>
                                                <h3 class="title">最生活毛巾·Air（10条装） 白色+素蓝</h3>
                                                <p class="desc">给生活一条好毛巾</p>
                                                <p class="price"><span>99元</span><del>169元</del></p>
                                            </div>
                                        </a>
                                    </li>
                                    <li class="rainbow-item-3">
                                        <a href="#">
                                            <div class="content">
                                                <div class="thumb"><img src="../assets/uploads/xm-flash-1.jpg" alt=""></div>
                                                <h3 class="title">米家IH电饭煲 4L 白色</h3>
                                                <p class="desc">多才多艺的智能电饭煲</p>
                                                <p class="price"><span>499元</span><del>599元</del></p>
                                            </div>
                                        </a>
                                    </li>
                                    <li class="rainbow-item-4">
                                        <a href="#">
                                            <div class="content">
                                                <div class="thumb"><img src="../assets/uploads/xm-flash-4.jpg" alt=""></div>
                                                <h3 class="title">最生活毛巾·Air（10条装） 白色+素蓝</h3>
                                                <p class="desc">给生活一条好毛巾</p>
                                                <p class="price"><span>99元</span><del>169元</del></p>
                                            </div>
                                        </a>
                                    </li>
                                    <li class="rainbow-item-2">
                                        <a href="#">
                                            <div class="content">
                                                <div class="thumb"><img src="../assets/uploads/xm-flash-1.jpg" alt=""></div>
                                                <h3 class="title">最生活毛巾·Air（10条装） 白色+素蓝</h3>
                                                <p class="desc">给生活一条好毛巾</p>
                                                <p class="price"><span>99元</span><del>169元</del></p>
                                            </div>
                                        </a>
                                    </li>
                                    <li class="rainbow-item-2">
                                        <a href="#">
                                            <div class="content">
                                                <div class="thumb"><img src="../assets/uploads/xm-flash-1.jpg" alt=""></div>
                                                <h3 class="title">最生活毛巾·Air（10条装） 白色+素蓝</h3>
                                                <p class="desc">给生活一条好毛巾</p>
                                                <p class="price"><span>99元</span><del>169元</del></p>
                                            </div>
                                        </a>
                                    </li>
                                    <li class="rainbow-item-3">
                                        <a href="#">
                                            <div class="content">
                                                <div class="thumb"><img src="../assets/uploads/xm-flash-2.jpg" alt=""></div>
                                                <h3 class="title">米家IH电饭煲 4L 白色</h3>
                                                <p class="desc">多才多艺的智能电饭煲</p>
                                                <p class="price"><span>499元</span><del>599元</del></p>
                                            </div>
                                        </a>
                                    </li>
                                    <li class="rainbow-item-4">
                                        <a href="#">
                                            <div class="content">
                                                <div class="thumb"><img src="../assets/uploads/xm-flash-3.jpg" alt=""></div>
                                                <h3 class="title">最生活毛巾·Air（10条装） 白色+素蓝</h3>
                                                <p class="desc">给生活一条好毛巾</p>
                                                <p class="price"><span>99元</span><del>169元</del></p>
                                            </div>
                                        </a>
                                    </li>
                                    <li class="rainbow-item-1">
                                        <a href="#">
                                            <div class="content">
                                                <div class="thumb"><img src="../assets/uploads/xm-flash-4.jpg" alt=""></div>
                                                <h3 class="title">最生活毛巾·Air（10条装） 白色+素蓝</h3>
                                                <p class="desc">给生活一条好毛巾</p>
                                                <p class="price"><span>99元</span><del>169元</del></p>
                                            </div>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 主要楼层商品 -->
                <!-- 广告大图片 -->
                <div class="home-banner-box"><a href="#"><img src="../assets/uploads/banner-1.webp" alt=""></a></div>
                <!-- 手机楼层 -->
                <div class="home-brick-box">
                    <!-- 头部 -->
                    <div class="box-hd">
                        <h2 class="title">手机</h2>
                        <div class="more"><a href="#">查看全部<i class="iconfont iconright"></i></a></div>
                    </div>
                    <!-- 主体 -->
                    <div class="box-bd clearfix">
                        <!-- 左边大图 -->
                        <div class="span4">
                            <ul class="brick-promo-list clearfix">
                                <li class="brick-promo-item-1"><a href="#"><img src="../assets/uploads/brick-1.webp" alt=""></a></li>
                            </ul>
                        </div>
                        <!-- 右边排列图 -->
                        <div class="span16">
                            <ul class="brick-list clearfix">
                                <li class="brick-item-1">
                                    <a href="#">
                                        <div class="figure-img"><img src="../assets/uploads/brick-2.webp" alt=""></div>
                                        <h3 class="title">小米10 青春版 5G</h3>
                                        <p class="desc">50倍潜望式变焦 / 轻薄5G手机</p>
                                        <p class="price"><span>4999元</span><del>5299元</del></p>
                                    </a>
                                </li>
                                <li class="brick-item-2">
                                    <a href="#">
                                        <div class="figure-img"><img src="../assets/uploads/brick-3.webp" alt=""></div>
                                        <h3 class="title">小米10 青春版 5G</h3>
                                        <p class="desc">50倍潜望式变焦 / 轻薄5G手机</p>
                                        <p class="price"><span>4999元</span><del>5299元</del></p>
                                    </a>
                                </li>
                                <li class="brick-item-3">
                                    <a href="#">
                                        <div class="figure-img"><img src="../assets/uploads/brick-4.webp" alt=""></div>
                                        <h3 class="title">小米10 青春版 5G</h3>
                                        <p class="desc">50倍潜望式变焦 / 轻薄5G手机</p>
                                        <p class="price"><span>4999元</span><del>5299元</del>
                                        </p>
                                    </a>
                                </li>
                                <li class="brick-item-4">
                                    <a href="#">
                                        <div class="figure-img"><img src="../assets/uploads/brick-5.webp" alt=""></div>
                                        <h3 class="title">小米10 青春版 5G</h3>
                                        <p class="desc">50倍潜望式变焦 / 轻薄5G手机</p>
                                        <p class="price"><span>4999元</span><del>5299元</del></p>
                                    </a>
                                </li>
                                <li class="brick-item-5">
                                    <a href="#">
                                        <div class="figure-img"><img src="../assets/uploads/brick-6.webp" alt=""></div>
                                        <h3 class="title">小米10 青春版 5G</h3>
                                        <p class="desc">50倍潜望式变焦 / 轻薄5G手机</p>
                                        <p class="price"><span>4999元</span><del>5299元</del></p>
                                    </a>
                                </li>
                                <li class="brick-item-6">
                                    <a href="#">
                                        <div class="figure-img"><img src="../assets/uploads/brick-7.webp" alt=""></div>
                                        <h3 class="title">小米10 青春版 5G</h3>
                                        <p class="desc">50倍潜望式变焦 / 轻薄5G手机</p>
                                        <p class="price"><span>4999元</span><del>5299元</del>
                                        </p>
                                    </a>
                                </li>
                                <li class="brick-item-7">
                                    <a href="#">
                                        <div class="figure-img"><img src="../assets/uploads/brick-8.webp" alt=""></div>
                                        <h3 class="title">小米10 青春版 5G</h3>
                                        <p class="desc">50倍潜望式变焦 / 轻薄5G手机</p>
                                        <p class="price"><span>4999元</span><del>5299元</del></p>
                                    </a>
                                </li>
                                <li class="brick-item-8">
                                    <a href="#">
                                        <div class="figure-img"><img src="../assets/uploads/brick-9.webp" alt=""></div>
                                        <h3 class="title">小米10 青春版 5G</h3>
                                        <p class="desc">50倍潜望式变焦 / 轻薄5G手机</p>
                                        <p class="price"><span>4999元</span><del>5299元</del></p>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <!-- 广告大图片 -->
                <div class="home-banner-box"><a href="#"><img src="../assets/uploads/banner-2.webp" alt=""></a></div>
                <!-- 家电楼层 -->
                <div class="home-jiadian-box">
                    <!-- 头部 -->
                    <div class="box-hd">
                        <h2 class="title">家电</h2>
                        <div class="more"><a href="#" class="ding">热门</a><a href="#">电视影音</a></div>
                    </div>
                    <!-- 主体 -->
                    <div class="box-bd clearfix">
                        <!-- 左边大图 -->
                        <div class="span4">
                            <ul class="jiadian-promo-list clearfix">
                                <li class="jiadian-promo-item-1"><a href="#"><img src="../assets/uploads/jiadian-1.webp" alt=""></a></li>
                                <li class="jiadian-promo-item-1"><a href="#"><img src="../assets/uploads/jiadian-2.webp" alt=""></a></li>
                            </ul>
                        </div>
                        <!-- 右边排列图 -->
                        <div class="span16">
                            <ul class="jiadian-list hot clearfix">
                                <li class="jiadian-item-1">
                                    <a href="#">
                                        <div class="figure-img"><img src="../assets/uploads/jiadian-3.webp" alt=""></div>
                                        <h3 class="title">Redmi 红米电视 70英寸</h3>
                                        <p class="desc">70英寸震撼巨屏，4K画质，细腻如真</p>
                                        <p class="price"><span>2999元</span><del>3999元</del></p>
                                    </a>
                                </li>
                                <li class="jiadian-item-1">
                                    <a href="#">
                                        <div class="figure-img"><img src="../assets/uploads/jiadian-4.webp" alt=""></div>
                                        <h3 class="title">Redmi 红米电视 70英寸</h3>
                                        <p class="desc">70英寸震撼巨屏，4K画质，细腻如真</p>
                                        <p class="price"><span>2999元</span><del>3999元</del></p>
                                    </a>
                                </li>
                                <li class="jiadian-item-1">
                                    <a href="#">
                                        <div class="figure-img"><img src="../assets/uploads/jiadian-5.webp" alt=""></div>
                                        <h3 class="title">Redmi 红米电视 70英寸</h3>
                                        <p class="desc">70英寸震撼巨屏，4K画质，细腻如真</p>
                                        <p class="price"><span>2999元</span><del>3999元</del></p>
                                    </a>
                                </li>
                                <li class="jiadian-item-1">
                                    <a href="#">
                                        <div class="figure-img"><img src="../assets/uploads/jiadian-6.webp" alt=""></div>
                                        <h3 class="title">Redmi 红米电视 70英寸</h3>
                                        <p class="desc">70英寸震撼巨屏，4K画质，细腻如真</p>
                                        <p class="price"><span>2999元</span><del>3999元</del></p>
                                    </a>
                                </li>
                                <li class="jiadian-item-1">
                                    <a href="#">
                                        <div class="figure-img"><img src="../assets/uploads/jiadian-7.webp" alt=""></div>
                                        <h3 class="title">Redmi 红米电视 70英寸</h3>
                                        <p class="desc">70英寸震撼巨屏，4K画质，细腻如真</p>
                                        <p class="price"><span>2999元</span><del>3999元</del></p>
                                    </a>
                                </li>
                                <li class="jiadian-item-1">
                                    <a href="#">
                                        <div class="figure-img"><img src="../assets/uploads/jiadian-8.webp" alt=""></div>
                                        <h3 class="title">Redmi 红米电视 70英寸</h3>
                                        <p class="desc">70英寸震撼巨屏，4K画质，细腻如真</p>
                                        <p class="price"><span>2999元</span><del>3999元</del></p>
                                    </a>
                                </li>
                                <li class="jiadian-item-1">
                                    <a href="#">
                                        <div class="figure-img"><img src="../assets/uploads/jiadian-9.webp" alt=""></div>
                                        <h3 class="title">Redmi 红米电视 70英寸</h3>
                                        <p class="desc">70英寸震撼巨屏，4K画质，细腻如真</p>
                                        <p class="price"><span>2999元</span><del>3999元</del></p>
                                    </a>
                                </li>
                                <div class="quan_more">
                                    <a href="#">
                                        <img src="../assets/uploads/jiadian-10.webp" alt="">
                                        <h3>Air 13.3" 2019款</h3>
                                        <p>5699元起</p>
                                    </a>
                                    <a href="#">
                                        <img src="../assets/img/arrow-right.png" alt="">
                                        <h3>浏览更多</h3>
                                        <p>热门</p>
                                    </a>
                                </div>
                            </ul>
                            <ul class="jiadian-list dianshi_yinyin clearfix">
                                <li class="jiadian-item-1">
                                    <a href="#">
                                        <div class="figure-img"><img src="../assets/uploads/jiadian1-1.webp" alt=""></div>
                                        <h3 class="title">Redmi 红米电视 70英寸</h3>
                                        <p class="desc">70英寸震撼巨屏，4K画质，细腻如真</p>
                                        <p class="price"><span>2999元</span><del>3999元</del></p>
                                    </a>
                                </li>
                                <li class="jiadian-item-1">
                                    <a href="#">
                                        <div class="figure-img"><img src="../assets/uploads/jiadian1-2.webp" alt=""></div>
                                        <h3 class="title">Redmi 红米电视 70英寸</h3>
                                        <p class="desc">70英寸震撼巨屏，4K画质，细腻如真</p>
                                        <p class="price"><span>2999元</span><del>3999元</del></p>
                                    </a>
                                </li>
                                <li class="jiadian-item-1">
                                    <a href="#">
                                        <div class="figure-img"><img src="../assets/uploads/jiadian1-3.webp" alt=""></div>
                                        <h3 class="title">Redmi 红米电视 70英寸</h3>
                                        <p class="desc">70英寸震撼巨屏，4K画质，细腻如真</p>
                                        <p class="price"><span>2999元</span><del>3999元</del></p>
                                    </a>
                                </li>
                                <li class="jiadian-item-1">
                                    <a href="#">
                                        <div class="figure-img"><img src="../assets/uploads/jiadian1-4.webp" alt=""></div>
                                        <h3 class="title">Redmi 红米电视 70英寸</h3>
                                        <p class="desc">70英寸震撼巨屏，4K画质，细腻如真</p>
                                        <p class="price"><span>2999元</span><del>3999元</del></p>
                                    </a>
                                </li>
                                <li class="jiadian-item-1">
                                    <a href="#">
                                        <div class="figure-img"><img src="../assets/uploads/jiadian1-5.webp" alt=""></div>
                                        <h3 class="title">Redmi 红米电视 70英寸</h3>
                                        <p class="desc">70英寸震撼巨屏，4K画质，细腻如真</p>
                                        <p class="price"><span>2999元</span><del>3999元</del></p>
                                    </a>
                                </li>
                                <li class="jiadian-item-1">
                                    <a href="#">
                                        <div class="figure-img"><img src="../assets/uploads/jiadian1-6.webp" alt=""></div>
                                        <h3 class="title">Redmi 红米电视 70英寸</h3>
                                        <p class="desc">70英寸震撼巨屏，4K画质，细腻如真</p>
                                        <p class="price"><span>2999元</span><del>3999元</del></p>
                                    </a>
                                </li>
                                <li class="jiadian-item-1">
                                    <a href="#">
                                        <div class="figure-img"><img src="../assets/uploads/jiadian1-7.webp" alt=""></div>
                                        <h3 class="title">Redmi 红米电视 70英寸</h3>
                                        <p class="desc">70英寸震撼巨屏，4K画质，细腻如真</p>
                                        <p class="price"><span>2999元</span><del>3999元</del></p>
                                    </a>
                                </li>
                                <div class="quan_more">
                                    <a href="#">
                                        <img src="../assets/uploads/jiadian1-8.webp" alt="">
                                        <h3>Air 13.3" 2019款</h3>
                                        <p>2699元起</p>
                                    </a>
                                    <a href="#">
                                        <img src="../assets/img/arrow-right.png" alt="">
                                        <h3>浏览更多</h3>
                                        <p>电视影音</p>
                                    </a>
                                </div>
                            </ul>
                        </div>
                    </div>
                </div>
                <!-- 广告大图片 -->
                <div class="home-banner-box"><a href="#"><img src="../assets/uploads/banner-1.webp" alt=""></a></div>
                <!-- 视频楼层 -->
                <div class="home-video-box">
                    <!-- 头部 -->
                    <div class="box-hd">
                        <h2 class="title">视频</h2>
                        <div class="more"><a href="#">查看全部<i class="iconfont iconright"></i></a></div>
                    </div>
                    <!-- 主体 -->
                    <div class="box-bd">
                        <ul class="video-list">
                            <li>
                                <a href="#">
                                    <div>
                                        <img src="../assets/uploads/video-1.webp" alt="">
                                        <i class="iconfont iconplay"></i>
                                    </div>
                                    <span>Redmi 10X系列发布会</span>
                                    <p>Redmi 10X系列发布会</p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div>
                                        <img src="../assets/uploads/video-2.webp" alt="">
                                        <i class="iconfont iconplay"></i>
                                    </div>
                                    <span>Redmi 10X系列发布会</span>
                                    <p>Redmi 10X系列发布会</p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div>
                                        <img src="../assets/uploads/video-3.webp" alt="">
                                        <i class="iconfont iconplay"></i>
                                    </div>
                                    <span>Redmi 10X系列发布会</span>
                                    <p>Redmi 10X系列发布会</p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div>
                                        <img src="../assets/uploads/video-4.webp" alt="">
                                        <i class="iconfont iconplay"></i>
                                    </div>
                                    <span>Redmi 10X系列发布会</span>
                                    <p>Redmi 10X系列发布会</p>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import $ from 'jquery'
export default {
    components:{
    },
    data() {
        return {
            
        }
    },
    methods:{

        // 楼层取，tab切换
        tab_switch(){
            $(".home-jiadian-box .more a:eq(0)").mouseenter(function(){
                $(".home-jiadian-box .more a:eq(1)").removeClass("ding")
                $(this).addClass("ding").addClass("ding")
                $(".dianshi_yinyin").css("display","none")
                $(".hot").css("display","block")
            })
            $(".home-jiadian-box .more a:eq(1)").mouseenter(function(){
                $(".home-jiadian-box .more a:eq(0)").removeClass("ding")
                $(this).addClass("ding")
                $(".dianshi_yinyin").css("display","block")
                $(".hot").css("display","none")
            })
        },

        // 楼层区，小米闪购轮播
        xiaomi_swiper(){
            var quanUl=$(".xm-flashsale .flashsale-list ul")
            var index=0
            // 定时器轮播
            var timer
            if(index==0){
                clearInterval(timer)
                timer=setInterval(function(){
                    $(".xm-flashsale .button-right").click()
                },4000)
            }
            // 点击右边
            $(".xm-flashsale .button-right").click(function(){
                index=index==2?2:++index
                if(index==1){
                    quanUl.css("margin-left","-992px")
                    $(".xm-flashsale .button-left").css("color","#757575")
                    $(".xm-flashsale .button-right").css("color","#757575")
                }
                if(index==2){
                    quanUl.css("margin-left","-1984px")
                    $(".xm-flashsale .button-left").css("color","#757575")
                    $(".xm-flashsale .button-right").css("color","#ccc")
                    clearInterval(timer)
                    timer=setInterval(function(){
                        $(".xm-flashsale .button-left").click()
                    },4000)
                }
            })
            // 点击右边
            $(".xm-flashsale .button-left").click(function(){
                index=index==0?0:--index
                if(index==0){
                    quanUl.css("margin-left","0px")
                    $(".xm-flashsale .button-left").css("color","#ccc")
                    $(".xm-flashsale .button-right").css("color","#757575")
                    clearInterval(timer)
                    timer=setInterval(function(){
                        $(".xm-flashsale .button-right").click()
                    },4000)
                }
                if(index==1){
                    quanUl.css("margin-left","-992px")
                    $(".xm-flashsale .button-left").css("color","#757575")
                    $(".xm-flashsale .button-right").css("color","#757575")
                }
            })
            // 鼠标进入移除事件
            $(".xm-flashsale .button-right").mouseenter(function(){
                $(".xm-flashsale .button-right").addClass("quan")
            })
            $(".xm-flashsale .button-right").mouseleave(function(){
                $(".xm-flashsale .button-right").removeClass("quan")
            })
            $(".xm-flashsale .button-left").mouseenter(function(){
                $(".xm-flashsale .button-left").addClass("quan")
            })
            $(".xm-flashsale .button-left").mouseleave(function(){
                $(".xm-flashsale .button-left").removeClass("quan")
            })
        },

        // 展示分类
        show_category(){
            $(".nav-category .category-a").css("visibility","hidden")
            $(".home-hero-category").css("visibility","visible")
            $(".nav-category .category-list").css("background-color","rgba(105, 101, 101, .6)")
            $(".nav-category .category-list a").css("color","#fff")
            $(".nav-category .category-list").css("border","0px solid #ff6700")

        },

        // 倒计时效果
        time_q(){
            // 获取要用到的元素
            var desc=document.querySelector(".flash-countdown .desc")
            var countdown=document.querySelector(".flash-countdown .countdown")
            var hour=countdown.children[0]
            var minute=countdown.children[2]
            var second=countdown.children[4]
            // +变成毫秒    输入时间
            var inputTime=+new Date("2100-5-19 00:00:00")
            getTime();
            setInterval(getTime,1000)
            function getTime(){
                // 现在的时间
                var nowTime=+new Date()
                var times=(inputTime-nowTime)/1000
                // 显示的文字
                var show=times>0?true:false
                desc.innerHTML=show?"距结束还有":"本场已结束"
                // console.log(times)
                // 显示时间
                var h=parseInt(times/60/60%24)
                h=h<10?"0"+h:h
                var m=parseInt(times/60%60)
                m=m<10?"0"+m:m
                var s=parseInt(times%60)
                s=s<10?"0"+s:s
                hour.innerHTML=h
                minute.innerHTML=m
                second.innerHTML=s
            }
        },


        // 轮播图
        swiper(){
            // 获取要用到的元素
            var back=document.querySelector(".home-hero-swiper")
            var ul=document.querySelector(".home-hero-swiper ul")
            var dot=document.querySelector(".bullets")
            var button_left=document.getElementById("swiper-left")
            var button_right=document.getElementById("swiper-right")
            // 测试
            // ul.style.left=-(ul.offsetLeft+1226)+"px"
            // console.log(dot)
            // console.log(back.offsetWidth)

            // 在执行动画的时候会用到
            var vue=this
            // 滚动图片数量 点击一次 滚动一张
            var num=0
            // 控制下面小圆圈的播放
            var circle=0
            // 节流阀 动画不播放完毕，不能进行其它的操作
            var flag=true
            // 克隆第一张图片加到ul最后，为了实现无缝滚动
            var last_li=ul.children[0].cloneNode(true)
            ul.appendChild(last_li)

            // 右边按钮
            // 如果加上function，不同es6语法，this指向就是button_right这个按钮，得是全局的this
            button_right.addEventListener('click',()=>{
                // 不执行完动画，不准执行其它的东西
                if(flag){
                    flag=false
                    // 到最后一张加上去的图，点击然后直接到最左边，然后在执行一次动画，做成无缝滚动效果
                    // 如果不加那最后一张图片，从最后一张图片到第一张图片直接过来，在执行一次动画，就变成第二张了
                    if(num==ul.children.length-1){
                        ul.style.left=0
                        num=0
                    }
                    // 这里是,不加最后一张图,然后在他到最后一张(第四张)的时候,
                    // 直接到第一张,而且因为num重置为0,不会在加一次动画,但是从最后一张过来的时候也没有动画，记得把num++去掉才行
                    // num=(num<ul.children.length-1?++num:0)
                    num++
                    this.quan_animate(ul,-num*back.offsetWidth,function(){
                        flag=true
                    })
                    // 小圈圈
                    circle++
                    // 小点到4立即变为零
                    if(circle==dot.children.length){
                        circle=0
                    }
                    circleChang()
                }
            })

            // 左边按钮
            button_left.addEventListener('click',()=>{
                if(flag){
                    flag=false
                    if(num==0){
                        num=ul.children.length-1
                        ul.style.left=-num*back.offsetWidth+"px"
                    }
                    num--
                    // 都是负值，num在变小，相当于越来越大，相当于右移
                    this.quan_animate(ul,-num*back.offsetWidth,function(){flag=true})
                    circle--
                    circle=circle<0?dot.children.length-1:circle
                    circleChang()
                }
            })

            // 小圈圈的改变
            function circleChang(){
                // console.log(dot.children[circle])
                for(var i=0;i<dot.children.length;i++){
                    dot.children[i].className=""
                }
                dot.children[circle].className="active"
            }

            // 每过三秒就自己轮播，相当于右移
            var timer=setInterval(function(){
                button_right.click()
            },3000)

            // 按钮显示与隐藏
            back.addEventListener('mouseenter',function(){
                button_right.style.display="block"
                button_left.style.display="block"
                // 鼠标在上面就不要自动轮播 清除定时器
                clearInterval(timer)
                timer=null
            })
            back.addEventListener('mouseleave',function(){
                button_right.style.display="none"
                button_left.style.display="none"
                // 鼠标不在上面就自动轮播
                timer=setInterval(function(){
                    button_right.click()
                },3000)
            })

            // 点击小圈也可以切换
            for(var i=0;i<dot.children.length;i++){
                dot.children[i].addEventListener('click',function(){
                    for(var i=0;i<dot.children.length;i++){
                        dot.children[i].className=""
                    }
                    this.className="active"
                    // 拿到索引
                    var index=this.getAttribute('index')
                    // console.log(index)
                    num=index
                    circle=index
                    vue.quan_animate(ul,-num*back.offsetWidth)
                })
            }
        },
        
        // 封装一个简单地动画函数
        quan_animate(obj,target,callback){
            // 
            clearInterval(obj.timer)
            obj.timer=setInterval(function(){
                // 步长，越来越慢
                var step=(target-obj.offsetLeft)/10
                // 取整，不出现小数问题
                step=step>0?Math.ceil(step):Math.floor(step)
                // 相等了就清除定时器
                if(obj.offsetLeft==target){
                    clearInterval(obj.timer)
                    // 有回调函数就执行回调函数
                    callback&&callback()
                }
                // 移动
                obj.style.left=obj.offsetLeft+step+"px"
            },15)
        }
    },
    mounted() {
        this.swiper()
        this.time_q()
        this.show_category()
        this.xiaomi_swiper()
        this.tab_switch()
    },
}
</script>
<style scoped>
.home-hero-container{
    position: relative;
}
.container{
    width: 1226px;
    margin-right: auto;
    margin-left: auto;
}
.home-hero{
    position: relative;
}
/* 轮播图 */
.home-hero-swiper{
    overflow: hidden;
    position: relative;
    width: 1226px;
    height: 460px;
}
.home-hero-swiper ul{
    position: absolute;
    top: 0;
    left: 0;
    height: 460px;
    width: 600%;
}
.home-hero-swiper ul li{
    float: left;
}
.home-hero-swiper img{
    display: block;
    width: 1226px;
    height: 460px;
}
/* 左右按钮 */
.home-hero-swiper .swiper-left{
    color: #ccc;
    font-size: 30px;
    position: absolute;
    text-align: center;
    top: 50%;
    left: 234px;
    width: 41px;
    line-height: 49px;
    margin-top: -35px;
    height: 49px;
    cursor: pointer;
    display: none;
}
.home-hero-swiper .swiper-right{
    color: #ccc;
    text-align: center;
    position: absolute;
    font-size: 30px;
    top: 50%;
    right: 0;
    margin-top: -35px;
    width: 41px;
    height: 49px;
    line-height: 49px;
    cursor: pointer;
    display: none;
}
.home-hero-swiper>a:hover{
    background-color: #e0e0e0;
    color: black;
}
/* 小圆圈 */
.bullets{
    position: absolute;
    width: 100px;
    bottom: 20px;
    text-align: right;
    right: 30px;
}
.bullets a{
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 6px;
    border: 2px solid #ccc;
    background: rgba(0,0,0,.4);
    margin: 0 2px;
}
.bullets .active{
    background-color: #fff;
}
/* .bullets a:hover{
    background-color: #fff;
} */
/* 主体的二级导航 */
.home-hero-sub{
    margin-top: 14px;
}
.span4{
    width: 234px;
    float: left;
    /* overflow: hidden; */
}
.home-channel-list{
    text-align: center;
    background-color: #5f5750;
    font-size: 12px;
    overflow: hidden;
}
.home-channel-list li{
    position: relative;
    float: left;
    width: 70px;
    height: 85px;
    padding: 0 3px;
}
.home-channel-list li::before{
    content: "";
    position: absolute;
    width: 61px;
    height: 1px;
    top: -1px;
    left: 6px;
    background-color: #665e57;
}
.home-channel-list li::after{
    content: "";
    position: absolute;
    width: 1px;
    height: 70px;
    top: 6px;
    left: 0px;
    background-color: #665e57;
}
.home-channel-list li a{
    padding-top: 18px;
    display: block;
    color: #fff;
    opacity: .7;
    transition: all .2s;
}
.home-channel-list li a:hover{
    opacity: 1;
}
.home-channel-list li a img{
    display: block;
    width: 24px;
    height: 24px;
    margin: 0px auto 4px;
}
.span16{
    margin-left: 14px;
    width: 978px;
    float: right;
}
.home-promo-list li{
    width: 316px;
    height: 170px;
    float: left;
    margin-left: 15px;
}
.home-promo-list li:nth-child(1){
    margin-left: 0px;
}
.home-promo-list li img{
    display: block;
    width: 316px;
    height: 170px;
}
/* 楼层区 */
.home-main{
    margin-top: 20px;
    width: 100%;
    background-color: #f5f5f5;
}
.box-hd{
    height: 58px;
    position: relative;
}
.box-hd h2{
    line-height: 58px;
    color: #333;
    font-weight: 200;
}
.box-hd .button-left{
    text-align: center;
    position: absolute;
    right: 35px;
    top: 20px;
    display: inline-block;
    width: 24px;
    height: 16px;
    border: 1px solid #e0e0e0;
    line-height: 16px;
    padding: 3px 5px;
    cursor: pointer;
    font-size: 16px;
    color: #ccc;
}
.box-hd .button-right{
    text-align: center;
    position: absolute;
    right: 0px;
    top: 20px;
    display: inline-block;
    width: 24px;
    height: 16px;
    border: 1px solid #e0e0e0;
    line-height: 16px;
    padding: 3px 5px;
    cursor: pointer;
    font-size: 16px;
    color: #757575;
}
/* .box-hd>span:hover{
    color: #ff6700;
} */
.quan{
    color: #ff6700!important;
}
.flash-countdown{
    /* margin-right: 10px; */
    height: 300px;
    padding-top: 39px;
    background-color: #f1eded;
    text-align: center;
    border-top-style: solid;
    border-width: 1px;
}
/* 颜色各异小线条 */
.rainbow-item-1{
    border-top-color: #e53935;
}
.rainbow-item-2{
    border-top-color: #ffac13;
}
.rainbow-item-3{
    border-top-color: #83c44e;
}
.rainbow-item-4{
    border-top-color: #2196f3;
}
/* 清除浮动 */
.xm-flashsale .box-bd{
    overflow: hidden;
}
/* .xm-flashsale{
    overflow: hidden;
} */
.xm-flashsale .round{
    font-size: 21px;
    color: #ef3a3b;
}
.xm-flashsale .desc{
    font-size: 15px;
}
.xm-flashsale .countdown{
    width: 168px;
    margin: 28px auto 0;
}
.xm-flashsale .countdown span{
    display: block;
    width: 46px;
    height: 46px;
    background-color: #605751;
    color: #fff;
    font-size: 24px;
    float: left;
    line-height: 46px;
}
.xm-flashsale .countdown i{
    float: left;
    width: 15px;
    height: 46px;
    line-height: 46px;
    color: #605751;
    font-style: normal;
    font-size: 28px;
}
.flashsale-list{
    height: 340px;
    overflow: hidden;
    position: relative;
    /* margin-left: 10px; */
}
.flashsale-list li{
    float: left;
    width: 234px;
    margin-right: 14px;
    border-top-width: 1px;
    border-top-style: solid;
    text-align: center;
    background-color: #fff;
}
.flashsale-list ul{
    height: 340px;
    width: 10000px;
    transition: all .4s;
}
.flashsale-list li a{
    color: #757575;
    display: block;
    height: 300px;
    padding-top: 39px;
}
.flashsale-list li a .thumb{
    display: block;
    width: 160px;
    margin: 0 auto 22px;
}
.flashsale-list li a .thumb img{
    display: block;
    width: 160px;
    height: 160px;
}
.flashsale-list li a .title{
    margin: 0 20px 3px;
    font-size: 14px;
    font-weight: 400;
    text-overflow: ellipsis;
    color: #212121;
    overflow: hidden;
    white-space: nowrap;
}
.flashsale-list li a .desc{
    height: 18px;
    margin: 0 20px 12px;
    font-size: 12px;
    text-overflow: ellipsis;
    color: #b0b0b0;
    overflow: hidden;
    white-space: nowrap;
}
.flashsale-list li a .price span{
    color: #ff6700;
}
/* 主要楼层商品 */
.home-banner-box{
    height: 120px;
    margin: 22px 0;
    overflow: hidden;
}
/* 手机楼层 */
/* 清除浮动 */
.home-brick-box{
    overflow: hidden;
}
.home-brick-box .box-hd{
    height: 58px;
}
.home-brick-box .box-hd .title{
    font-size: 22px;
    font-weight: 200;
    color: #333;
    line-height: 58px;
}
.home-brick-box .box-hd .more{
    position: absolute;
    top: 0;
    right: 0;
}
.home-brick-box .box-hd .more a{
    display: block;
    line-height: 58px;
    color: #424242;
    font-size: 16px;
    transition: all .4s;
}
/* 过渡变色 */
.home-brick-box .box-hd .more:hover a{
    color: #ff6700;
}
.home-brick-box .box-hd .more:hover i{
    background-color: #ff6700;
}
.home-brick-box .box-hd .more i{
    width: 12px;
    height: 12px;
    padding: 4px;
    margin-left: 8px;
    border-radius: 16px;
    font-size: 12px;
    line-height: 12px;
    background: #b0b0b0;
    color: #fff;
    vertical-align: 1px;
    transition: all .4s;
}
/* .home-brick-box .box-bd{

} */
.brick-promo-list{
    height: 614px;
}
.brick-promo-list li img{
    display: block;
    width: 234px;
    height: 614px;
}
.brick-promo-list li{
    float: left;
    background-color: #fff;
    position: relative;
    transition: all .2s;
}
.brick-promo-list li:hover{
    margin-top: -2px;
    box-shadow: 0 15px 30px rgba(0,0,0,.1);
}
.brick-list{
    width: 978px;
    height: 630px;
    overflow: hidden;
}
/* .home-brick-box .box-bd{
    overflow: hidden;
} */
.brick-list li{
    float: left;
    height: 260px;
    width: 234px;
    padding: 20px 0;
    margin-left: 10px;
    margin-bottom: 14px;
    background-color: #fff;
    transition: all .2s;
}
.brick-list li:hover{
    /* margin-top: -2px;有错误 */
    transform: translate3d(0,-2px,0);
    box-shadow: 0 15px 30px rgba(0,0,0,.1);
}
.brick-list li a{
    color: #757575;
}
.brick-list li .figure-img{
    width: 160px;
    height: 160px;
    margin: 0 auto 18px;
    text-align: center;
}
.brick-list li img{
    width: 160px;
    height: 160px;
    display: inline-block;
}
.brick-list li .title{
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    margin: 0 10px 2px;
}
.brick-list li .desc{
    margin: 0 10px 10px;
    height: 18px;
    font-size: 12px;
    color: #b0b0b0;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.brick-list li .price{
    text-align: center;
    margin: 0 10px 14px;
}
.brick-list li .price span{
    color: #ff6700;
}
/* 家电楼层 */
.home-jiadian-box .box-hd{
    height: 58px;
}
.home-jiadian-box .box-hd .title{
    font-size: 22px;
    font-weight: 200;
    color: #333;
    line-height: 58px;
}
.home-jiadian-box .box-hd .more{
    position: absolute;
    top: 0;
    right: 0;
}
.home-jiadian-box .box-hd .more a{
    height: 45px;
    display: inline-block;
    line-height: 58px;
    color: #424242;
    font-size: 16px;
    margin-left: 30px;
}
/* 变色 */
/* .home-jiadian-box .box-hd a:hover{
    color: #ff6700;
    border-bottom: 2px solid #ff6700;
} */
/* 用js做 */
.ding{
    color: #ff6700;
    border-bottom: 2px solid #ff6700;
}
.jiadian-promo-list li{
    margin-bottom: 14px;
    height: 300px;
    transition: all .3s;
}
.jiadian-promo-list li:hover{
    transform: translate3d(0,-2px,0);
    box-shadow: 0 15px 30px rgba(0,0,0,.1);
}
.jiadian-promo-list li img{
    width: 234px;
    height: 300px;
    display: block;
}
.jiadian-list{
    width: 978px;
    height: 630px;
    overflow: hidden;
}
.dianshi_yinyin{
    display: none;
}
.jiadian-list li{
    float: left;
    height: 260px;
    width: 234px;
    padding: 20px 0;
    margin-left: 10px;
    margin-bottom: 14px;
    background-color: #fff;
    transition: all .2s;
}
.jiadian-list li:hover{
    /* margin-top: -2px;有错误 */
    transform: translate3d(0,-2px,0);
    box-shadow: 0 15px 30px rgba(0,0,0,.1);
}
.jiadian-list li a{
    color: #757575;
}
.jiadian-list li .figure-img{
    width: 160px;
    height: 160px;
    margin: 0 auto 18px;
    text-align: center;
}
.jiadian-list li img{
    width: 160px;
    height: 160px;
    display: inline-block;
}
.jiadian-list li .title{
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    font-weight: normal;
    overflow: hidden;
    margin: 0 10px 2px;
}
.jiadian-list li .desc{
    margin: 0 10px 10px;
    height: 18px;
    font-size: 12px;
    color: #b0b0b0;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.jiadian-list li .price{
    text-align: center;
    margin: 0 10px 14px;
}
.jiadian-list li .price span{
    color: #ff6700;
}
.quan_more{
    position: relative;
    float: left;
    height: 260px;
    width: 234px;
    margin-left: 10px;
    margin-bottom: 14px;
}
.quan_more a{
    position: relative;
    width: 234px;
    height: 142px;
    display: block;
    background-color: #fff;
    margin-bottom: 14px;
    margin-top: 0;
    transition: all .3s;
}
.quan_more a:hover{
    transform: translate3d(0,-2px,0);
    box-shadow: 0 15px 30px rgba(0,0,0,.1);
}
.quan_more a img {
    margin-left: 140px;
    margin-top: 32px;
    width: 80px;
    height: 80px;
}
.quan_more a{
    color: #757575;
    font-size: 14px;
}
.quan_more a h3{
    margin-top: -70px;
    margin-left: 30px;
}
.quan_more a p{
    margin-left: 30px;
}
.quan_more a:nth-child(1) h3{
    font-size: 14px;
    font-weight: normal;
}
.quan_more a:nth-child(1) p{
    color: #ff6700;
}
/* 视频楼层 */
.home-video-box{
    padding-bottom: 30px;
}
.home-video-box .box-hd{
    height: 58px;
}
.home-video-box .box-hd .title{
    font-size: 22px;
    font-weight: 200;
    color: #333;
    line-height: 58px;
}
.home-video-box .box-hd .more{
    position: absolute;
    top: 0;
    right: 0;
}
.home-video-box .box-hd .more a{
    display: block;
    line-height: 58px;
    color: #424242;
    font-size: 16px;
    transition: all .4s;
}
/* 过渡变色 */
.home-video-box .box-hd .more:hover a{
    color: #ff6700;
}
.home-video-box .box-hd .more:hover i{
    background-color: #ff6700;
}
.home-video-box .box-hd .more i{
    width: 12px;
    height: 12px;
    padding: 4px;
    margin-left: 8px;
    border-radius: 16px;
    font-size: 12px;
    line-height: 12px;
    background: #b0b0b0;
    color: #fff;
    vertical-align: 1px;
    transition: all .4s;
}
.video-list {
    width: 1240px;
    height: 285px;
}
.video-list li{
    position: relative;
    float: left;
    width: 296px;
    height: 285px;
    margin-left: 14px;
    margin-bottom: 14px;
    text-align: center;
    background: #fff;
    transition: all .2s linear;
}
.video-list li:nth-child(1){
    margin-left: 0;
}
.video-list li img{
    width: 296px;
    height: 180px;
    margin-bottom: 28px;
}
.video-list li a{
    color: #757575;
}
.video-list li h3{
    margin: 0 14px 6px;
    font-size: 14px;
    font-weight: 400;
    text-align: center;
    color: #333;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.video-list li p{
    height: 18px;
    margin: 10px 14px;
    font-size: 12px;
    color: #b0b0b0;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.video-list li div{
    position: relative;
}
.video-list li i{
    text-align: center;
    position: absolute;
    padding-left: 3px;
    left: 20px;
    bottom: 40px;
    width: 32px;
    height: 20px;
    line-height: 20px;
    border: 2px solid #fff;
    border-radius: 12px;
    background-color: rgba(0,0,0,.6);
    color: #fff;
    transition: all .2s;
    overflow: hidden;
}
.video-list li:hover{
    box-shadow: 0 15px 30px rgba(0,0,0,.1);
    transform: translate3d(0,-2px,0);
}
.video-list li:hover i{
    background-color: #ff6700;
    border-color: #ff6700;
}
</style>